<template>
	<view class="bg-lottery pr" :style="'background-image: url(' + bg_image + ');'">
		<view class="d-b-s top-box ww100">
			<view class="d-s-c mt20">
				<image lazy-load class="lottery-points" src="/static/icon/lottery-points.png" mode=""></image>
				<text class="yellow f28">账户积分</text>
				<text class="white f36 ml10">{{ user_points }}</text>
			</view>
			<view class="points-rule" @click="isRule = true">抽奖规则</view>
		</view>
		<view class="rule-title">每次抽奖消耗 {{ points }} 积分,今日剩余{{ times }}次</view>

		<view class="lottery-title">
			<!-- <almost-lottery
				:prizeList="prizeList"
				:prizeIndex="prizeIndex"
				:lotteryBg="'/uni_modules/almost-lottery/static/almost-lottery/almost-lottery__bg.png'"
				:actionBg="'/uni_modules/almost-lottery/static/almost-lottery/almost-lottery__action.png'"
				@reset-index="prizeIndex = -1"
				@draw-start="handleDrawStart"
				@draw-end="handleDrawEnd"
				@finish="handleDrawFinish"
				v-if="prizeList.length"
			/> -->
			<aylottery ref="aylottery" :availableSurplusNum="times" :list="prizeList" themeColor="#ffd372"
				bgColor="#feb360" bg_sd_Color="#ffffff00" @result="handleDrawEnd" @toDetailPage="toDetailPage"
				:stay_index="prizeIndex" @startFunc="handleDrawStart"></aylottery>
		</view>

		<view class="ww100 mb23 mt40">
			<button type="primary" class="record" @click="gotoPage('/pagesPlus/lottery/WinningRecord')">
				我的中奖记录
				<text class="icon iconfont icon-jiantou1"></text>
			</button>
		</view>
		<view class="content" v-if="listData && listData.length > 0">
			<view class="d-b-c swiper-title">
				<view class="swiper-title-1">昵称</view>
				<view class="swiper-title-2">奖品名称</view>
				<view class="swiper-title-3">获奖时间</view>
			</view>
			<swiper class="swiper" vertical circular autoplay interval="2000" display-multiple-items="5">
				<swiper-item v-for="(item, index) in listData" :key="index">
					<view class="box">
						<view class="swiper-title-1 text-ellipsis">{{ maskUsername(item.nickName)  }}</view>
						<view class="swiper-title-2 text-ellipsis">{{ item.record_name }}</view>
						<view class="swiper-title-3 text-ellipsis">{{ item.create_time }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<popup :show="isPopup" type="middle" backgroundColor="#fff" :padding="0" :width="576" :borderRadius="35"
			@hidePopup="hidePopup">
			<image lazy-load src="/static/lottery.png" mode="aspectFill" class="pop-tit-img"></image>
			<view class="pr ww100 tc mb38">
				<view class="pop-tit-text"><text class="pop-text">{{result.type == 0?'很遗憾!':'恭喜您获得了'}}</text></view>
			</view>
			<view class="d-c-c d-c ww100 product-box pr">
				<image lazy-load class="pop_img" :src="result.image" mode="aspectFill"></image>
				<view class="f26 text-ellipsis">{{ result.prompt }}</view>
				<view class="pop-btn-sm mt10" v-if="result.type == 3" @click="toRecord">
					领奖</view>
				<view class="pop-btn-sm mt10" v-if="result.type != 3" @click="isPopup = false">
					知道了</view>
			</view>
		</popup>
		<popup :show="isRule" :width="575" :height="550" :padding="0" @hidePopup="isRule = false"
			backgroundColor="none">
			<view class="pop-center">
				<image lazy-load class="bg-rule" src="/static/invite/lottery.png" mode=""></image>
				<view class="pop-title">活动规则</view>
				<scroll-view scroll-y="true" style="height: 473rpx;">
					<view class="pop-title-box">{{ content }}</view>
				</scroll-view>
			</view>
		</popup>
	</view>
</template>

<script>
	import popup from '@/components/uni-popup.vue';
	// import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	import aylottery from '@/components/ay-lottery/marquee.vue';
	export default {
		components: {
			// AlmostLottery,
			popup,
			uniLoadMore,
			aylottery
		},
		data() {
			return {
				loading: true,
				finish: false,
				times: 0,
				points: '',
				user_points: '',
				bg_image: '',
				content: '',
				// 以下是奖品配置数据
				// 奖品数据
				prizeList: [],
				// 奖品是否设有库存
				onStock: true,
				// 中奖下标
				prizeIndex: -1,
				result: {},
				listData: [],
				/*样式*/
				styleValue: '',
				/*当前角标*/
				index_num: 0,
				/*高度*/
				lineHeight: 0,
				/*最大数*/
				maxSize: 0,
				/*时间*/
				timer: null,
				isPopup: false,
				isRecord: false,
				recordList: [],
				list_rows: 10,
				last_page: 0,
				/*当前页面*/
				page: 1,
				/*没有更多*/
				no_more: false,
				isRule: false
			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.recordList.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		onShow() {
			this.isRecord = false;
			this.restoreData();
			this.handleInitCanvas();
		},
		methods: {
			toRecord() {
				this.isPopup = false;
				this.gotoPage('/pagesPlus/lottery/WinningRecord');
			},
			maskUsername(username) {
				if (!username || username.length < 2) {
					// 如果用户名长度小于2，直接返回原字符串
					return username;
				}

				// 获取首位字符
				const firstChar = username.charAt(0);
				const lastChar = username.charAt(username.length - 1);

				// 生成中间的 '*'
				const middleStars = '*'.repeat(username.length - 2);

				// 拼接首位字符和中间的 '*'
				return firstChar + middleStars + lastChar;
			},
			toDetailPage(e) {
				let list = e.list;
				let idx = e.curIndex;
				let list_img = [];
				let item = e.item;

				list.forEach(item => {
					list_img.push(item.img);
				});
				if (list_img && list_img.length > 0) {
					uni.previewImage({
						current: list_img[idx], //  传 Number H5端出现不兼容
						urls: list_img,
						indicator: 'number',
						loop: true
					});
				}
			},


			/*初始化*/
			init() {
				let self = this;
				if (this.listData.length > 1) {
					uni.getSystemInfo({
						success(res) {
							self.lineHeight = (res.windowWidth / 750) * 60;
							self.maxSize = self.listData.length;
							self.timer = setInterval(function() {
								self.animation();
							}, 3000);
						}
					});
				}
			},
			/*动画*/
			animation() {
				let self = this;
				self.index_num++;
				if (self.index_num >= self.maxSize) {
					self.index_num = 0;
				}
				this.styleValue = -self.lineHeight * self.index_num;
			},
			async getPrizeList() {
				this.loading = true;
				// 等待接口返回的数据进一步处理
				let res = await this.requestApiGetPrizeList();
				if (res.ok) {
					let data = res.data;
					if (data.length) {
						data.forEach(item => {
							item.img = item.image;
							item.img_bg = '';
						})
						this.prizeList = data;
						this.finish = true;
					}
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '获取奖品失败'
					});
				}
			},
			requestApiGetPrizeList() {
				let self = this;
				return new Promise((resolve, reject) => {
					self._post('plus.lottery.Lottery/getLottery', {}, function(res) {
						self.loading = false;
						self.bg_image = res.data.data.file_path;
						self.content = res.data.data.content;
						self.prizeList = res.data.data.prize;
						self.listData = res.data.recordList;
						self.times = res.data.nums;
						self.points = res.data.data.points;
						self.user_points = res.data.data.user_points;
						self.init();
						resolve({
							ok: true,
							data: self.prizeList
						});
					});
				});
			},
			GetDateDiff(startTime) {
				var t2 = startTime; //格式不正确需要转换
				var aftert2 = new Date(t2.replace(/-/g, '/'));
				var data = new Date();
				let times = data.getTime() - aftert2.getTime();
				var days = parseInt(times / (24 * 1000 * 3600)); //计算相差的天数
				var leave = times % (24 * 3600 * 1000); //计算天数后剩余的毫秒数

				var h = parseInt(leave / (3600 * 1000)); //计算小时数

				//计算分钟数
				var h_leave = leave % (3600 * 1000);
				var min = parseInt(h_leave / (60 * 1000));

				//计算秒数
				var min_leave = h_leave % (60 * 1000);
				var sec = parseInt(min_leave / 1000);
				let text = '';
				if (days > 0) {
					text = `${days}天前`;
				} else if (h > 0) {
					text = `${h}小时前`;
				} else if (min > 0) {
					text = `${min}分钟前`;
				} else {
					text = `${sec}秒前`;
				}
				console.log(days);
				return text;
			},
			// 重新生成
			handleInitCanvas() {
				this.prizeList = [];
				this.getPrizeList();
			},
			// 本次抽奖开始
			handleDrawStart() {
				let self = this;

				self.prizeIndex = -1;
				if (self.loading || !self.finish) {
					return;
				}
				if (self.times <= 0) {
					self.showError('次数不足');
					return;
				}
				self.loading = true;
				self.finish = false;
				self._post(
					'plus.lottery.Lottery/draw', {},
					function(res) {
						self.times--;
						self.loading = false;
						self.result = res.data.result;
						let list = [...self.prizeList];
						let prizeId = res.data.prizeId;
						for (let i = 0; i < list.length; i++) {
							let item = list[i];
							if (item.prizeId === prizeId) {
								// 中奖下标
								self.prizeIndex = i;
								break;
							}
						}
						self.$refs.aylottery.start();
						console.log('本次抽中奖品 =>', self.prizeList[self.prizeIndex].name);
					},
					function(err) {
						self.loading = false;
					}
				);
			},
			hidePopup() {
				this.isPopup = false;
			},
			hideRecordPopup() {
				this.isRecord = false;
			},

			// 本次抽奖结束
			handleDrawEnd() {
				this.finish = true;
				this.isPopup = true;
				this.handleInitCanvas();
				// 完成抽奖后，这里处理你拿到结果后的逻辑
			},
			// 抽奖转盘绘制完成
			handleDrawFinish(res) {
				this.finish = true;
				// 抽奖转盘准备就绪后，这里处理你的逻辑
				// console.log('抽奖转盘绘制完成', res)
			},
			/*还原初始化*/
			restoreData() {
				this.recordList = [];
				this.page = 1;
				this.no_more = false;
				this.last_page = 1;
			},
			getList() {
				let self = this;
				self.loading = true;
				self._postBody(
					'plus.lottery.Lottery/record', {
						list_rows: self.list_rows,
						page: self.page || 1
					},
					function(res) {
						self.loading = false;
						self.recordList = self.recordList.concat(res.data.records);
						self.lastPage = res.data.lastPage;
						if (res.data.lastPage <= 1) {
							self.no_more = true;
						}
					}
				);
			},
			getRecord() {
				this.restoreData();
				this.getList();
				this.isRecord = true;
			},
			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				self.page++;
				self.loading = true;
				if (self.page > self.last_page) {
					self.loading = false;
					self.no_more = true;
					return;
				}
				self.getList();
			}
		}
	};
</script>

<style lang="scss">
	.bg-lottery {
		width: 750rpx;
		min-height: 1843rpx;
		background-size: 750rpx 1843rpx;
		background-position: 0 0;
		overflow: hidden;
	}

	.rule-title {
		font-size: 26rpx;
		margin: 0 auto;
		width: 498rpx;
		margin-top: 338rpx;
		color: #E25C12;
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.15);
		background: #FACD89;
		border-radius: 200rpx;
		text-align: center;
		min-height: 56rpx;
		line-height: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	.lottery-title {
		padding-top: 120rpx;
		position: relative;
		z-index: 1;
	}

	button.record {
		width: 392rpx;
		height: 82rpx;
		border: none;
		background: linear-gradient(0deg, #FDF3BF 0%, #FAC233 49%, #FAC233 100%);
		box-shadow: 0rpx 1rpx 6rpx 0rpx rgba(228, 1, 28, 0);
		border-radius: 42rpx;
		padding: 0;
		color: #E37012;
		font-size: 32rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.record .icon.icon-jiantou1 {
		font-size: 28rpx;
		font-weight: bold;
		color: #E37012;
		line-height: 1;
		margin-left: 10rpx;
	}

	.pop_img {
		width: 130rpx;
		height: 130rpx;
		border-radius: 35rpx;
		margin-bottom: 40rpx;
	}

	.pop-btn-sm {
		width: 212rpx;
		height: 64rpx;
		background: linear-gradient(0deg, #FDF3BF 0%, #FAC233 29%, #FAC233 100%);
		border-radius: 32rpx;
		color: #E37012;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pop-tit-img {
		width: 576rpx;
		height: 324rpx;
		position: absolute;
		z-index: 1;
		left: 0;
		top: -244rpx;
	}

	.pop-tit-text {
		color: #fff;
		font-size: 32rpx;
		display: inline;
		padding: 0 16rpx;
		height: 80rpx;
		line-height: 80rpx;

		.pop-text {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index: 2;
		}
	}

	.product-box {
		border-radius: 24rpx;
		background-color: #ffffff;
		padding: 47rpx 0 40rpx 0;
	}

	.top-box {
		position: absolute;
		top: 20rpx;
		z-index: 2;
	}

	.lottery-points {
		width: 56rpx;
		height: 56rpx;
		margin-right: 14rpx;
		flex-shrink: 0;
		margin-left: 20rpx;
	}

	.points-rule {
		width: 47rpx;
		height: 138rpx;
		background: #FFD372;
		border-radius: 15rpx 0 0 15rpx;
		color: #E27012;
		font-size: 24rpx;
		padding: 10rpx 0 0;
		box-sizing: border-box;
		writing-mode: vertical-rl;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.yellow {
		color: #ffc519;
	}

	.pop-center {
		position: relative;
		width: 575rpx;
		height: 550rpx;
	}

	.pop-title {
		position: relative;
		height: 60rpx;
		line-height: 60rpx;
		color: #ffffff;
		font-size: 28rpx;
		text-align: center;
		z-index: 1;
	}

	.pop-title-box {
		padding: 78rpx 52rpx 20rpx 42rpx;
		white-space: pre-line;
		color: #7f685a;
		font-size: 26rpx;
		line-height: 46rpx;
	}

	.bg-rule {
		width: 575rpx;
		height: 550rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}

	.swiper {
		width: 662rpx;
		/* 高度跟自己需要的子元素更改，我这里是显示3个，每个50rpx 所以是150rpx */
		height: 240rpx;
		margin: 0rpx auto;
	}

	.content {
		width: 710rpx;
		margin: 0 auto;
		padding: 37rpx 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 25rpx;

		.swiper-title {
			height: 48rpx;
			line-height: 48rpx;
			color: #E27012;
		}

		.swiper-title-1 {
			width: 188rpx;
		}

		.swiper-title-2 {
			width: 178rpx;
		}

		.swiper-title-3 {
			width: 254rpx;
		}
	}

	.box {
		color: #333;
		font-size: 24rpx;
		line-height: 48rpx;
		height: 48rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding: 0 10rpx;
	}

	.bg-lottery::v-deep .uni-popup-middle {
		overflow: inherit;
	}
</style>